import React from 'react';
import {
  Row,
  Col,
  Card,
  Statistic,
  Progress,
  Space,
  Typography,
  Tag,
  List,
  Avatar
} from 'antd';
import {
  UserOutlined,
  ShoppingCartOutlined,
  DollarOutlined,
  EyeOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
  CheckCircleOutlined,
  ClockCircleOutlined,
  WarningOutlined
} from '@ant-design/icons';

const { Title, Text } = Typography;

const Dashboard = () => {
  // 模拟数据
  const recentActivities = [
    {
      id: 1,
      user: '张三',
      action: '登录系统',
      time: '2分钟前',
      type: 'login',
    },
    {
      id: 2,
      user: '李四',
      action: '创建用户',
      time: '5分钟前',
      type: 'create',
    },
    {
      id: 3,
      user: '王五',
      action: '修改订单',
      time: '10分钟前',
      type: 'update',
    },
    {
      id: 4,
      user: '赵六',
      action: '删除数据',
      time: '15分钟前',
      type: 'delete',
    },
  ];

  const systemStatus = [
    { name: 'CPU使用率', value: 65, status: 'normal' },
    { name: '内存使用率', value: 78, status: 'warning' },
    { name: '磁盘使用率', value: 45, status: 'normal' },
    { name: '网络带宽', value: 89, status: 'danger' },
  ];

  const getStatusColor = (status) => {
    switch (status) {
      case 'normal': return '#52c41a';
      case 'warning': return '#faad14';
      case 'danger': return '#ff4d4f';
      default: return '#d9d9d9';
    }
  };

  const getActionIcon = (type) => {
    switch (type) {
      case 'login': return <CheckCircleOutlined style={{ color: '#52c41a' }} />;
      case 'create': return <CheckCircleOutlined style={{ color: '#1890ff' }} />;
      case 'update': return <ClockCircleOutlined style={{ color: '#faad14' }} />;
      case 'delete': return <WarningOutlined style={{ color: '#ff4d4f' }} />;
      default: return <CheckCircleOutlined />;
    }
  };

  return (
    <div>
      {/* 页面标题 */}
      <div style={{ marginBottom: 24 }}>
        <Title level={2} style={{ margin: 0 }}>
          仪表板
        </Title>
        <div style={{ opacity: 0.7, marginTop: 8 }}>
          系统概览和实时监控数据
        </div>
      </div>

      {/* 统计卡片 */}
      <Row gutter={[24, 24]} style={{ marginBottom: 24 }}>
        <Col xs={24} sm={12} lg={6}>
          <Card
            style={{
              background: 'rgba(24, 144, 255, 0.1)',
              border: '1px solid rgba(24, 144, 255, 0.2)',
              borderRadius: '12px',
            }}
          >
            <Statistic
              title={<span style={{ color: '#1890ff' }}>总用户数</span>}
              value={1128}
              prefix={<UserOutlined style={{ color: '#1890ff' }} />}
              suffix={
                <Space>
                  <ArrowUpOutlined style={{ color: '#52c41a' }} />
                  <span style={{ color: '#52c41a', fontSize: '12px' }}>12%</span>
                </Space>
              }
              valueStyle={{ color: '#ffffff' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card
            style={{
              background: 'rgba(82, 196, 26, 0.1)',
              border: '1px solid rgba(82, 196, 26, 0.2)',
              borderRadius: '12px',
            }}
          >
            <Statistic
              title={<span style={{ color: '#52c41a' }}>订单总数</span>}
              value={2468}
              prefix={<ShoppingCartOutlined style={{ color: '#52c41a' }} />}
              suffix={
                <Space>
                  <ArrowUpOutlined style={{ color: '#52c41a' }} />
                  <span style={{ color: '#52c41a', fontSize: '12px' }}>8%</span>
                </Space>
              }
              valueStyle={{ color: '#ffffff' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card
            style={{
              background: 'rgba(250, 173, 20, 0.1)',
              border: '1px solid rgba(250, 173, 20, 0.2)',
              borderRadius: '12px',
            }}
          >
            <Statistic
              title={<span style={{ color: '#faad14' }}>总收入</span>}
              value={98765}
              prefix={<DollarOutlined style={{ color: '#faad14' }} />}
              suffix={
                <Space>
                  <ArrowDownOutlined style={{ color: '#ff4d4f' }} />
                  <span style={{ color: '#ff4d4f', fontSize: '12px' }}>3%</span>
                </Space>
              }
              valueStyle={{ color: '#ffffff' }}
              precision={2}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card
            style={{
              background: 'rgba(0, 255, 255, 0.1)',
              border: '1px solid rgba(0, 255, 255, 0.2)',
              borderRadius: '12px',
            }}
          >
            <Statistic
              title={<span style={{ color: '#00ffff' }}>访问量</span>}
              value={15420}
              prefix={<EyeOutlined style={{ color: '#00ffff' }} />}
              suffix={
                <Space>
                  <ArrowUpOutlined style={{ color: '#52c41a' }} />
                  <span style={{ color: '#52c41a', fontSize: '12px' }}>25%</span>
                </Space>
              }
              valueStyle={{ color: '#ffffff' }}
            />
          </Card>
        </Col>
      </Row>

      {/* 系统状态和活动记录 */}
      <Row gutter={[24, 24]}>
        <Col xs={24} lg={12}>
          <Card
            title={
              <span style={{ fontSize: '16px' }}>系统状态</span>
            }
            style={{
              background: 'rgba(0, 255, 255, 0.02)',
              border: '1px solid rgba(0, 255, 255, 0.1)',
              borderRadius: '12px',
              height: '400px',
            }}
            styles={{
              header: {
                background: 'rgba(0, 255, 255, 0.05)',
                borderBottom: '1px solid rgba(0, 255, 255, 0.1)',
              },
              body: {
                background: 'transparent',
              }
            }}
          >
            <div style={{ padding: '16px 0' }}>
              {systemStatus.map((item, index) => (
                <div key={index} style={{ marginBottom: 24 }}>
                  <div
                    style={{
                      display: 'flex',
                      justifyContent: 'space-between',
                      marginBottom: 8,
                    }}
                  >
                    <Text style={{ opacity: 0.9 }}>
                      {item.name}
                    </Text>
                    <Text style={{ color: getStatusColor(item.status) }}>
                      {item.value}%
                    </Text>
                  </div>
                  <Progress
                    percent={item.value}
                    strokeColor={getStatusColor(item.status)}
                    trailColor="rgba(255, 255, 255, 0.1)"
                    showInfo={false}
                  />
                </div>
              ))}
            </div>
          </Card>
        </Col>

        <Col xs={24} lg={12}>
          <Card
            title={
              <span style={{ fontSize: '16px' }}>
                最近活动
              </span>
            }
            style={{
              background: 'rgba(0, 255, 255, 0.02)',
              border: '1px solid rgba(0, 255, 255, 0.1)',
              borderRadius: '12px',
              height: '400px',
            }}
            styles={{
              header: {
                background: 'rgba(0, 255, 255, 0.05)',
                borderBottom: '1px solid rgba(0, 255, 255, 0.1)',
              },
              body: {
                background: 'transparent',
                padding: 0,
              }
            }}
          >
            <List
              dataSource={recentActivities}
              renderItem={(item) => (
                <List.Item
                  style={{
                    padding: '16px 24px',
                    borderBottom: '1px solid rgba(0, 255, 255, 0.05)',
                  }}
                >
                  <List.Item.Meta
                    avatar={
                      <Avatar
                        style={{
                          backgroundColor: 'rgba(0, 255, 255, 0.1)',
                          border: '1px solid rgba(0, 255, 255, 0.2)',
                        }}
                        icon={getActionIcon(item.type)}
                      />
                    }
                    title={
                      <div
                        style={{
                          display: 'flex',
                          justifyContent: 'space-between',
                          alignItems: 'center',
                        }}
                      >
                        <Text>{item.user}</Text>
                        <Text style={{ opacity: 0.6, fontSize: '12px' }}>
                          {item.time}
                        </Text>
                      </div>
                    }
                    description={
                      <Text style={{ opacity: 0.8 }}>
                        {item.action}
                      </Text>
                    }
                  />
                </List.Item>
              )}
            />
          </Card>
        </Col>
      </Row>

      {/* 快捷操作 */}
      <Row gutter={[24, 24]} style={{ marginTop: 24 }}>
        <Col span={24}>
          <Card
            title={
              <span style={{ fontSize: '16px' }}>
                快捷操作
              </span>
            }
            style={{
              background: 'rgba(0, 255, 255, 0.02)',
              border: '1px solid rgba(0, 255, 255, 0.1)',
              borderRadius: '12px',
            }}
            styles={{
              header: {
                background: 'rgba(0, 255, 255, 0.05)',
                borderBottom: '1px solid rgba(0, 255, 255, 0.1)',
              },
              body: {
                background: 'transparent',
              }
            }}
          >
            <Space size={[16, 16]} wrap>
              <Tag
                color="processing"
                style={{
                  padding: '8px 16px',
                  fontSize: '14px',
                  cursor: 'pointer',
                  border: '1px solid rgba(24, 144, 255, 0.3)',
                  background: 'rgba(24, 144, 255, 0.1)',
                }}
              >
                创建用户
              </Tag>
              <Tag
                color="success"
                style={{
                  padding: '8px 16px',
                  fontSize: '14px',
                  cursor: 'pointer',
                  border: '1px solid rgba(82, 196, 26, 0.3)',
                  background: 'rgba(82, 196, 26, 0.1)',
                }}
              >
                查看报表
              </Tag>
              <Tag
                color="warning"
                style={{
                  padding: '8px 16px',
                  fontSize: '14px',
                  cursor: 'pointer',
                  border: '1px solid rgba(250, 173, 20, 0.3)',
                  background: 'rgba(250, 173, 20, 0.1)',
                }}
              >
                系统设置
              </Tag>
              <Tag
                color="error"
                style={{
                  padding: '8px 16px',
                  fontSize: '14px',
                  cursor: 'pointer',
                  border: '1px solid rgba(255, 77, 79, 0.3)',
                  background: 'rgba(255, 77, 79, 0.1)',
                }}
              >
                备份数据
              </Tag>
              <Tag
                style={{
                  padding: '8px 16px',
                  fontSize: '14px',
                  cursor: 'pointer',
                  border: '1px solid rgba(0, 255, 255, 0.3)',
                  background: 'rgba(0, 255, 255, 0.1)',
                  color: '#00ffff',
                }}
              >
                查看日志
              </Tag>
            </Space>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Dashboard; 